<template>
  <div class="search-container">
    <el-form
        ref="formData"
        :inline="true"
        :model="formData"
        @keyup.enter.native="()=>{
          queryForm(false)
        }"
        size="small"
    >
      <el-form-item label="排序方式">
        <el-select
            v-model.trim="formData.orderField"
            placeholder="请输入规则ID"
        >
          <el-option label="按威胁指数评分排序" value="score"/>
          <el-option label="按影响单位排序" value="deptNum"/>
          <el-option label="按攻击次数排序" value="detectionNum"/>
          <el-option label="按最新检出排序" value="lastTime"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="cardTitle">
        <el-input
            v-model.trim="formData.viewName"
            :placeholder="`请输入${cardTitle}`"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="威胁情报标签">
        <el-input
            v-model.trim="formData.threatTags"
            placeholder="请输入威胁情报标签"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="()=>{
          queryForm(false)
        }" type="primary" icon="el-icon-search">
          查询
        </el-button>
        <el-button icon="el-icon-refresh-left" @click.stop="queryForm(true)">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="card-list-box">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item,index) in dataList">
          <div class="grid-content" @click="gotoDetail(item)">
            <div class="grid-title">
              <img :src="imageSrc" alt="">
              <div class="name">{{ item.viewName }}</div>
              <el-tag type="danger" size="small">{{ item.score }}</el-tag>
            </div>
            <div class="tag-box">
              <el-tag type="danger" size="small" effect="plain" v-for="tag in item.threatTag">{{ tag }}</el-tag>
            </div>
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="col-box">
                  <div class="icon"></div>
                  <div class="name">影响资产</div>
                  <div class="value">
                      <span class="count">{{
                          numConvert(item.deptNum || 0)
                        }}</span>
                    <span class="unit">个</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="col-box">
                  <div class="icon"></div>
                  <div class="name">影响IP</div>
                  <div class="value">
                      <span class="count">{{
                          numConvert(item.ipNum || 0)
                        }}</span>
                    <span class="unit">个</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="col-box">
                  <div class="icon"></div>
                  <div class="name">检出依据</div>
                  <div class="value">
                      <span class="count">{{
                          numConvert(item.detectionReasonNum || 0)
                        }}</span>
                    <span class="unit">个</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="col-box">
                  <div class="icon"></div>
                  <template v-if="viewType === 2">
                    <div class="name">影响暴露面</div>
                  </template>
                  <template v-else-if="viewType === 3">
                    <div class="name">关联组织</div>
                  </template>
                  <template v-else-if="viewType === 4">
                    <div class="name">影响域名</div>
                  </template>
                  <div class="value">
                    <template v-if="viewType === 2">
                     <span class="count">{{
                         numConvert(item.exposedNum || 0)
                       }}</span>
                    </template>
                    <template v-else-if="viewType === 3">
                     <span class="count">{{
                         numConvert(item.campaignNum || 0)
                       }}</span>
                    </template>
                    <template v-else-if="viewType === 4">
                     <span class="count">{{
                         numConvert(item.domainNum || 0)
                       }}</span>
                    </template>
                    <span class="unit">个</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="col-box">
                  <div class="icon"></div>
                  <div class="name">共检出</div>
                  <div class="value">
                      <span class="count">{{
                          numConvert(item.detectionNum || 0)
                        }}</span>
                    <span class="unit">次</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="col-box">
                  <div class="icon"></div>
                  <div class="name">攻击类型</div>
                  <div class="value">
                      <span class="count">{{
                          numConvert(item.eventTypeNum || 0)
                        }}</span>
                    <span class="unit">类</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="col-box">
                  <div class="icon"></div>
                  <div class="name">
                    <span>最新检出 </span>
                    <span>{{ item.lastTime }} </span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="col-box">
                  <div class="icon"></div>
                  <div class="name">
                    <span>首次检出 </span>
                    <span>{{ item.firstTime }} </span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

    </div>
    <el-pagination
        :disabled="dataLoading"
        background
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="paging"
        :page-size="limit"
        :total="total"
        layout="total, prev, pager, next, jumper"
        style="text-align: right"
    ></el-pagination>
  </div>
</template>

<script>
const mockData = [
  {
    viewName: '北京网络中心', // 名称
    score: 10,  // 评分
    threatTag: ['僵尸网络', '钓鱼木马'], // 标签
    maliciousDomainNum: 11, // 恶意域名数目
    maliciousIpNum: 9, // 恶意IP数目
    deptNum: 90,  // 影响单位(影响资产)
    ipNum: 1209932, // 影响IP
    detectionReasonNum: 22, // 检出依据
    exposedNum: 33, // 影响暴露面
    campaignNum: 44,   // 关联组织
    domainNum: 44, // 影响域名
    detectionNum: 44, // 共检出/攻击次数
    eventTypeNum: 44, // 攻击类型
    duration: 20, // 持续周期
    eventType: ['勒索软件'], // 详情页标签
    lastTime: '2024年7月9日18:34:36', // 最新检出
    firstTime: '2024年7月9日18:34:36',// 首次检出
  }, {
    viewName: '南京网络中心', // 名称
    score: 99,  // 评分
    threatTag: ['僵尸网络', '钓鱼木马'], // 标签
    maliciousDomainNum: 11, // 恶意域名数目
    maliciousIpNum: 9, // 恶意IP数目
    deptNum: 90,  // 影响单位(影响资产)
    ipNum: 111, // 影响IP
    detectionReasonNum: 22, // 检出依据
    exposedNum: 33, // 影响暴露面
    campaignNum: 44,   // 关联组织
    domainNum: 44, // 影响域名
    detectionNum: 44, // 共检出/攻击次数
    eventTypeNum: 44, // 攻击类型
    duration: 20, // 持续周期
    eventType: ['勒索软件'], // 详情页标签
    lastTime: '2024年7月9日18:34:36', // 最新检出
    firstTime: '2024年7月9日18:34:36',// 首次检出
  }, {
    viewName: '北京网络中心', // 名称
    score: 99,  // 评分
    threatTag: ['僵尸网络', '钓鱼木马'], // 标签
    maliciousDomainNum: 11, // 恶意域名数目
    maliciousIpNum: 9, // 恶意IP数目
    deptNum: 90,  // 影响单位(影响资产)
    ipNum: 111, // 影响IP
    detectionReasonNum: 22, // 检出依据
    exposedNum: 33, // 影响暴露面
    campaignNum: 44,   // 关联组织
    domainNum: 44, // 影响域名
    detectionNum: 44, // 共检出/攻击次数
    eventTypeNum: 44, // 攻击类型
    duration: 20, // 持续周期
    eventType: ['勒索软件', 'HTTP'], // 详情页标签
    lastTime: '2024年7月9日18:34:36', // 最新检出
    firstTime: '2024年7月9日18:34:36',// 首次检出
  }, {
    viewName: '北京网络中心', // 名称
    score: 99,  // 评分
    threatTag: ['僵尸网络', '钓鱼木马'], // 标签
    maliciousDomainNum: 11, // 恶意域名数目
    maliciousIpNum: 9, // 恶意IP数目
    deptNum: 90,  // 影响单位(影响资产)
    ipNum: 111, // 影响IP
    detectionReasonNum: 22, // 检出依据
    exposedNum: 33, // 影响暴露面
    campaignNum: 44,   // 关联组织
    domainNum: 44, // 影响域名
    detectionNum: 44, // 共检出/攻击次数
    eventTypeNum: 44, // 攻击类型
    duration: 20, // 持续周期
    eventType: [], // 详情页标签
    lastTime: '2024年7月9日18:34:36', // 最新检出
    firstTime: '2024年7月9日18:34:36',// 首次检出
  }
];
import {numConvert} from '@/utils/pe_util.js'

export default {
  name: "SearchArea",
  data() {
    return {
      dataLoading: false,
      paging: 1,
      limit: 8,
      total: 32,
      formData: {
        orderField: 'score',
        viewName: '',
        threatTags: '',
      },
      dataList: [],
    }
  },
  props: {
    viewType: {
      type: Number,
      required: true,
    },
    datePickerValue: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  computed: {
    cardTitle() {
      switch (this.viewType) {
        case 2:
          return '攻击组织';
        case 3:
          return '恶意域名';
        case 4:
          return '恶意IP';
      }
    },
    imageSrc() {
      switch (this.viewType) {
        case 2:
          return require('@/views/attackAngle/assets/view-2.png');
        case 3:
          return require('@/views/attackAngle/assets/view-3.png');
        case 4:
          return require('@/views/attackAngle/assets/view-4.png');
      }
    }
  },
  methods: {
    numConvert: numConvert,
    initComp() {
      this.queryForm(true);
    },
    queryForm(reset) {
      console.log('搜索组件获取数据了------', this.datePickerValue);
      if (reset) {
        this.formData = {
          orderField: 'score',
          viewName: '',
          threatTags: '',
        }
      }
      this.paging = 1;
      this.getDataList();
    },
    getDataList() {
      const params = {
        startTime: this.datePickerValue[0],
        endTime: this.datePickerValue[1],
        viewType: this.viewType,
        startPosition: this.limit * (this.paging - 1),
        maxResult: this.limit,
        ...this.formData,
      }
      console.log(params);
      this.dataList = mockData;
    },
    // 每页数
    sizeChangeHandle(val) {
      this.limit = val;
      this.paging = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.paging = val;
      this.getDataList();
    },

    // 跳转到详情
    gotoDetail(item){
      localStorage.setItem('attackAngleItem', JSON.stringify(item));
      const paramsStr = `startTime=${this.datePickerValue[0]}&endTime=${this.datePickerValue[1]}&viewType=${this.viewType}&viewName=${item.viewName}`;
      this.$router.push(`/attackAngle/detail?${paramsStr}`);
    }
  }
}
</script>


<style lang="scss">
.search-container {
  padding-bottom: 20px;
  .grid-content {
    padding: 0 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid #e2e2e2;
    height: 300px;
    cursor: pointer;


    .grid-title {
      display: flex;
      align-items: center;
      height: 50px;
      border-bottom: 1px solid #e2e2e2;

      > img {
        width: 18px;
        margin-right: 5px;
      }

      .name {
        flex: 1;
        font-size: 18px;
        font-weight: bold;
        color: #808191;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .tag-box {
      padding: 15px 0 10px 0;

      .el-tag {
        margin-right: 10px;

        &:last-of-type {
          margin-right: 0;
        }
      }
    }

    .col-box {
      display: flex;
      align-items: center;
      height: 36px;

      .icon {
        width: 5px;
        height: 5px;
        background: #348fea;
        border-radius: 50%;
        margin-right: 10px;
      }

      .name {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #999;
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .value {
        font-size: 16px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 10px;

        .count {
          font-size: 18px;
          line-height: 36px;
          color: #333;
          font-weight: bold;
        }

        .unit {
          font-weight: 400;
          font-size: 14px;
          color: #999;
          margin-left: 3px;
        }
      }
    }
  }
}
</style>